<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <img src="../images/zhan1.jpg" alt="">
    <button onclick="addCanvas()">生成Canvas</button>
    <button onclick="generateImg()">生成图片</button>

    <script>
        function addCanvas() {
            let bt = document.querySelector('button')

            let img = new Image()
            img.src = "../images/zhan1.jpg"
            img.onload = function () {
                let width = img.width
                let height = img.height
                let {
                    canvas,
                    ctx
                } = createCanvasAndCtx(width, height)
                ctx.drawImage(this, 0, 0, width, height)
                document.body.insertBefore(canvas, bt)
            }
        }

        function createCanvasAndCtx(width, height) {
            let canvas = document.createElement('canvas')
            canvas.setAttribute('width', width)
            canvas.setAttribute('height', height)
            canvas.setAttribute('onmouseout','end()')
            canvas.setAttribute('onmousedown','start()')
            canvas.setAttribute('onmouseup','end()')
            let ctx = canvas.getContext('2d')
            return {
                canvas,
                ctx
            }
        }

        function start() {
            let img = document.querySelector('img')
            let canvas = document.querySelector('canvas')
            let ctx = canvas.getContext('2d')

            let imgData = ctx.getImageData(0,0,img.width,img.height) 
            canvas.onmousemove = (e) => {
                let w = imgData.width
                let h = imgData.height
                // 打马赛克的程度，数字越大越模糊
                let num = 10
                // 获取当前鼠标所在的像素RGBA
                let color = getXY(imgData,e.offsetX,e.offsetY)
                for(let i = 0;i < num;i++) {
                    for(let j = 0;j < num;j++) {
                        setXY(imgData,e.offsetX + i,e.offsetY + j,color)
                    }
                }
                ctx.putImageData(imgData,0,0)
            }
        }
        function generateImg() {
            let canvas = document.querySelector('canvas')
            var newImg = new Image()
            newImg.src = canvas.toDataURL('image/jpg')
            document.body.insertBefore(newImg,canvas)
        }
        function setXY(obj,x,y,color) {
            var w = obj.width
            var h = obj.height
            var d = obj.data
            obj.data[4 * (y * w + x)] = color[0]
            obj.data[4 * (y * w + x) + 1] = color[1]
            obj.data[4 * (y * w + x) + 2] = color[2]
            obj.data[4 * (y * w + x) + 3] = color[3]

        }
        function getXY(obj,x,y) {
            var w = obj.width
            var h = obj.height
            var d = obj.data
            var color = []
            color[0] = obj.data[4 * (y * w + x)]
            color[1] = obj.data[4 * (y * w + x) + 1]
            color[2] = obj.data[4 * (y * w + x) + 2]
            color[3] = obj.data[4 * (y * w + x) + 3]
            return color
        }
        function end() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = null
        }
    </script>
</body>

</html>